<template>
  <div class="friends-filter">
    <!-- 筛选条件 -->
    <div class="search-condition">
      <el-select
        v-model="authorWxid"
        class="el-select-wechats-list"
        size="small"
        style="margin-right: 10px"
        clearable
        placeholder="所属微信"
      >
        <el-option
          v-for="(wechat, index) in wechats"
          :key="index"
          :label="wechat.WeChatNick"
          :value="wechat.WeChatId"
        ></el-option>
      </el-select>

      <el-input
        v-model.trim="wechatNo"
        style="width: 300px"
        placeholder="好友的微信号"
        size="small"
        maxlength="30"
        show-word-limit
        clearable
      ></el-input>

      <el-input
        v-model.trim="wechatNick"
        size="small"
        style="width: 250px"
        placeholder="好友昵称"
        maxlength="30"
        show-word-limit
        clearable
      ></el-input>

      <el-input
        v-model.trim="wechatMemo"
        size="small"
        style="width: 300px"
        placeholder="好友备注"
        maxlength="25"
        show-word-limit
        clearable
      >
        <!-- <template slot="prepend">备注:</template> -->
      </el-input>
      <el-button
        size="small"
        style="background-color: #ff9f00; color: #ffffff; border: solid #ff9f00 1px"
        @click="screenFriends"
      >
        筛选
      </el-button>
    </div>
    <!-- 数据展示 -->
    <!-- <div class="friends-list"> -->
    <el-table :data="tableData[currentPage - 1]" stripe border highlight-current-row>
      <el-table-column type="index" :index="indexMethod" label="序号" width="60px"></el-table-column>
      <el-table-column label="所属微信">
        <template slot-scope="scope">
          <span v-text="wechatsNameMap[scope.row.WeChatId] || scope.row.WeChatId"></span>
        </template>
      </el-table-column>
      <el-table-column label="微信号" prop="FriendNo"></el-table-column>
      <el-table-column label="昵称" prop="FriendNick"></el-table-column>
      <el-table-column label="头像" width="60px">
        <template slot-scope="scope">
          <el-image style="width: 32px; height: 32px" :src="scope.row.Avatar">
            <div slot="error" class="image-slot">
              <i style="font-size: 50px" class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="备注名" prop="Memo"></el-table-column>
      <el-table-column label="性别" prop="Gender" width="80px"></el-table-column>
      <el-table-column label="省市" prop="Province"></el-table-column>
      <el-table-column label="城市" prop="City"></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            style="padding: 5px; background-color: #ff9f00; color: #ffffff"
            type="warning"
            size="small"
            @click="handleClick(scope.row)"
          >
            <!-- <i class="el-icon-delete" style="font-size: 16px"></i> -->
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      style="margin: 0 auto; margin-top: 5px"
      :current-page="currentPage"
      :page-sizes="[15, 30, 45, 60]"
      :page-size="pageSize"
      :pager-count="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalNum"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
    <!-- </div> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'ToolsFriendsFilter',
  data() {
    return {
      authorWxid: '', // 所属微信号
      wechatNo: '', // 微信号 6—20个字母、bai数字、下划线和du减号，必须以字母开头
      wechatNick: '', // 微信昵称 15个汉字(30个字符)
      wechatMemo: '', // 微信备注 25个汉字（50个数字或字母）
      // 分页
      pageSize: 15, // 每页消息数
      currentPage: 1 // 当前页
    }
  },
  computed: {
    ...mapGetters({
      wechats: 'conversation/wechats',
      wechatsNameMap: 'conversation/wechatsNameMap',
      searchResults: 'nedb/searchResults'
    }),
    // 信息总数
    totalNum() {
      return this.searchResults.length
    },
    // 表格中的数据
    tableData() {
      // 筛选出来的好友进行分组
      const size = this.pageSize
      const newFriends = []
      for (let i = 0; i < this.searchResults.length; i += size) {
        newFriends.push(this.searchResults.slice(i, i + size))
      }
      return newFriends
    }
  },
  methods: {
    // 筛选好友
    screenFriends() {
      const msg = {}
      if (this.authorWxid) {
        msg.WeChatId = this.authorWxid
      }
      if (this.wechatNo) {
        msg.FriendNo = this.wechatNo
      }
      if (this.wechatMemo) {
        msg.Memo = this.wechatMemo
      }
      if (this.wechatNick) {
        msg.FriendNick = this.wechatNick
      }
      this.$store.dispatch('nedb/FindFriendsByConditions', msg)
    },
    handleClick(friendInfo) {
      // this.$message.info('待实现')
      this.$confirm('此操作将删除该好友, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$store.dispatch('websocket/DeleteFriendTask', friendInfo)
          this.$message({
            type: 'info',
            message: '正在删除!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 计算序号
    indexMethod(index) {
      return index + 1
    },
    // 选择row
    choseRow(row) {
      // 好友
      const friendId = row.FriendId
      const fid = this.friends2send.indexOf(friendId)
      fid >= 0 ? this.friends2send.splice(fid, 1) : this.friends2send.push(friendId)
    },
    // 该row是否被选中
    computedCheckState(row) {
      return this.friends2send.indexOf(row.FriendId) >= 0
    },
    // 本页全选
    choseAllOfPage() {
      const rows = this.tableData[this.currentPage - 1]
      const rowsArry = rows.map((x) => x.FriendId)
      const intersection = this.friends2send.filter(function (val) {
        return rowsArry.indexOf(val) > -1
      })
      if (intersection.length === rowsArry.length) {
        for (const row of rows) {
          const friendId = row.FriendId
          const fid = this.friends2send.indexOf(friendId)
          this.friends2send.splice(fid, 1)
        }
      } else {
        for (const row of rows) {
          const friendId = row.FriendId
          const fid = this.friends2send.indexOf(friendId)
          if (fid < 0) {
            this.friends2send.push(friendId)
          }
        }
      }
    },
    // 修改pageSize
    handleSizeChange(val) {
      if (this.pageSize === val) return
      this.pageSize = val
    },
    // 修改当前页
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

<style lang="scss" scoped>
.friends-filter {
  height: 100%;
  overflow: hidden;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;

  .search-condition {
    display: flex;
    padding-bottom: 10px;
    .el-input {
      margin-right: 10px;
    }
  }

  // .friends-list {
  //   flex: 1 1 auto;
  //   display: flex;
  //   flex-direction: column;
  //   align-items: center;
  //   overflow: hidden;
  //   .el-pagination {
  //     margin: 5px 0;
  //   }
  // }
}
</style>
